<template>
	<view class="content">
		<view class="informat">
			<view class="formItem">
				<view class="lab"><text>*</text>修改头像</view>
				<view class="avatar" @click="uploadPhoto()">
					<image :src="domain + form.avatar" v-if="form.avatar!=''" mode="scaleToFill" class="img"></image>
					<image src="@/static/image/upload.png" v-else mode="scaleToFill" class="img"></image>
				</view>
			</view>
			<view class="formItem">
				<view class="lab"><text>*</text>手机号</view>
				<input class="uni-input" v-model.trim="form.mobile" placeholder="请输入您的手机号" placeholder-style="color:#ccc"/>
			</view>
			<view class="formItem">
				<view class="lab"><text>*</text>修改昵称</view>
				<input class="uni-input" v-model.trim="form.nickname" placeholder="请输入您的昵称" placeholder-style="color:#ccc"/>
			</view>
			<view class="formItem">
				<view class="lab"><text>*</text>微信号</view>
				<input class="uni-input" v-model.trim="form.wechat" placeholder="请输入您的微信号" placeholder-style="color:#ccc"/>
			</view>
		</view>
		<button class="primary" @tap="confirmModify()">确认修改</button>
	</view>
</template>

<script>
	import common from '@/static/js/common.js';
	
	export default {
		data() {
			return {
				domain: getApp().globalData.DOMAIN,
				loading: false,
				form: {
					avatar: '',
					mobile: '',
					nickname: '',
					wechat: ''
				},
				rules: [
					{name: 'avatar', rule: 'empty', msg: '头像不能为空'},
					{name: 'mobile', rule: 'empty', msg: '手机号不能为空'},
					{name: 'mobile', rule: 'mobile', msg: '手机号格式错误'},
					{name: 'nickname', rule: 'empty', msg: '昵称不能为空'},
					{name: 'wechat', rule: 'empty', msg: '微信号不能为空'},
				],
			}
		},
		mounted() {
			this.getUserMsgInfo()
		},
		methods: {
			getUserMsgInfo() {
				let that = this;
				common.api({
					method: 'GET',
					url: '/mobile/user/index',
					success:(res) => {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						that.form.avatar = res.data.avatar
						that.form.mobile = res.data.mobile
						that.form.nickname = res.data.nickname
						that.form.wechat = res.data.wechat
					}
				});
			},
			uploadPhoto() {
				let that = this;
				uni.chooseImage({
				    count: 1,
				    sourceType: ['album'],
				    success: function (res) {
						uni.uploadFile({
							url: getApp().globalData.UPLOADURL, 
							filePath: res.tempFilePaths[0],
							header:{
								'token': getApp().globalData.TOKEN
							},
							name: 'file',
							success: (result) => {
								let obj = JSON.parse(result.data);
								that.form.avatar = obj.data.url;
							}
						});
				    }
				});
			},
			confirmModify() {
				let that = this;
				let valid = common.validator(that.rules, that.form)
				if (!valid.validator) { uni.showToast({ title: valid.msg, icon: 'none' });return false;}
				common.api({
					method: 'POST',
					url: '/mobile/user/profile',
					data: {
						avatar: that.form.avatar,
						mobile: that.form.mobile,
						nickname: that.form.nickname,
						wechat: that.form.wechat,
					},
					success: function(res) {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						uni.showToast({ title: '资料修改成功', icon: 'success' });
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						if (prevPage) {
							uni.navigateBack();
						} else {
							uni.reLaunch({url: '/pages/user/index'})
						}
					},
					error: function () {
						uni.showToast({ title: '数据请求异常', icon: 'none' });
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		position: relative;
		.informat {
			background-color: #fff;
			padding: 0 20rpx;
			margin-bottom: 30rpx;
			.formItem:last-of-type {
				border-bottom: none;
			}
		}
		.primary {
			width: 80vw;
			margin: 60rpx auto 40rpx;
		}
	}
</style>
